<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import {ref} from "vue";
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const Random = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};
const cameraList = ref([])
for (let i = 0; i < 20; i++) {
  cameraList.value.push({
    id: i + 1,
    name: `Camera 00${i + 1}`,
    location: `https://polytronone.com/430-${i + 1}`,
    input: '',
    state: Random([true, false]),
  });
}
defineExpose({
  showModal,
})
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium" >
        <div class="">
          <p class="text-md s4k:text-[16px]">Add Live 3D URLs</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[90px]"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div class="w-full h-[92px] flex flex-col justify-center items-start">
        <p class="text-[20px] font-[600] font-Inter text-[var(--theme-font-color)]">Add Live 3D
          URLs</p>
        <p class="text-md text-[#9CA3AF]">Insert Live 3D URLs to cameras</p>
      </div>
      <div class="w-full h-[544px] border border-solid border-[var(--grid)] mb-[24px]">
        <div
          class="w-full h-[50px] flex flex-row text-[var(--theme-font-color)] text-[12px] font-[500] font-Medium bg-[var(--theme-search-bg)]">
          <div class="flex-[1] m-auto"><span class="ml-[16px]">CAMERA ID</span></div>
          <div class="flex-[2] m-auto"><span class="ml-[16px]">Live 3D URL</span></div>
        </div>
        <div class="list w-full h-[calc(100%_-_50px)]">
          <div class="w-full h-[50px]" v-for="v in cameraList" :key="v.id">
            <div
              class="w-full h-[50px] flex flex-row text-[#6B7280] text-[14px] font-[400] font-Medium border-b border-solid border-[var(--grid)] "
              v-if="v.state">
              <div class="flex-[1] m-auto"><span class="ml-[16px]">{{ v.name }}</span></div>
              <div class="flex-[2] m-auto"><span class="ml-[16px]">{{ v.location }}</span></div>
            </div>
            <div
              class="w-full h-[50px] flex flex-row text-[var(--theme-font-color)] text-[14px] font-[400] font-Medium border-b border-solid border-[var(--grid)] "
              v-else>
              <div class="flex-[1] m-auto"><span class="ml-[16px]">{{ v.name }}</span></div>
              <div class="flex-[2] h-full flex flex-col justify-center">
                <fwb-input id="input" v-model="v.input" placeholder=""/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div
        class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center">
        <div
          class="w-[122px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[1rem] cursor-pointer s4k:rounded-[8px]">
          <span class="m-auto">Save</span></div>
      </div>
    </template>
  </fwb-modal>
</template>

<style scoped lang="scss">
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 635px;
    height: 795px;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-4 {
      padding-right: 0.4rem;

    }
    .p-6 {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 0;
    }
  }
}

#input {
  margin-left: 16px;

  :deep(input) {
    width: 327px;
    height: 35px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
    color: #9CA3AF;
    background: var(--theme);
    border: solid 1px var(--grid);
    border-radius: 8px;
    &:focus {
      outline: none;
      box-shadow: inset 0 0;
    }
  }
}
@media screen and (min-width: 2560px) {
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      height: 810px;
    }
  }
}
@media screen and (min-width: 3840px) {
  //#CreateModal {
  //  :deep(.max-w-md) {
  //    max-width: 1270px;
  //    height: 1712px;
  //
  //    button {
  //      svg {
  //        transform: scale(2);
  //      }
  //    }
  //
  //    .p-6 {
  //      padding-left: 2rem;
  //      padding-right: 2rem;
  //
  //      .list {
  //        overflow-y: scroll;
  //        scrollbar-width: none;
  //        -ms-overflow-style: none;
  //      }
  //    }
  //  }
  //}
  //#input {
  //  margin-left: 32px;
  //
  //  :deep(input) {
  //    width: 654px;
  //    height: 70px;
  //    font-size: 28px;
  //  }
  //}
  #CreateModal {
    :deep(.max-w-md) {
      height: 845px;
      transform: scale(2);
      .p-4{
        padding: 0.8rem;
        padding-right: 0.4rem;
      }
      .p-6 {
        padding:  1rem;
        margin-top: -20px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
